<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="align-items: stretch; width: 300px; padding: 0px 20px;">
        <h2>用户登录</h2>
        <div>
            <el-button @click="loginType=1">账号登录</el-button>
            <el-button @click="loginType=2">扫码登录</el-button>
        </div>
        <el-form v-if="loginType==1" label-width="50px" label-position="left">
            <el-form-item label="账号: ">
                <el-input v-model="user.ename" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="密码: ">
                <el-input v-model="user.pwd" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
                <el-link :underline="false" @click="alert('有缘人, 这个功能交给实现你了!')">忘记密码</el-link>
                <el-button @click.prevent="login" type="primary">登录</el-button>
            </el-form-item>
        </el-form>
        <img v-else src="txx/user/createQr" alt="" width="200px">
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            user:{
                ename:"",pwd:""
            },
            loginType: 1,
            handler:null
        },
        methods:{
            login(){
                // 通过请求体body=>json
                // axios.post("txx/user/login",this.user);
                // 通过请求体body=>a=1&b=2
                let p = new URLSearchParams();
                p.append("ename",this.user.ename);
                p.append("password",this.user.pwd);
                axios.post("txx/user/login",p).then(res=>{
                    if(res.data.code == 1) {
                        this.$message(res.data.msg);
                        location.href = "index.html"
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        watch:{
            loginType(newValue,oldValue) {
                if(newValue==2){
                    // 轮询
                    this.handler = window.setInterval(()=>{
                        axios.get("txx/user/refreshQr").then(res=>{
                            if(res.data.code == 1) {
                                location.href = "index.html"
                            } else {
                                console.info(res.data.msg)
                            }
                        })
                    },1000);
                } else{
                    if(this.handler){
                        window.clearInterval(this.handler);
                    }
                }
            }
        }
    })
</script>
</body>
</html>
